<template>
  <a-card :bordered="false">

    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="24">

          <a-col :md="6" :sm="12">
            <a-form-item label="系统名称">
              <a-input placeholder="请输入系统名称查询" v-model="queryParam.systemname"></a-input>
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>

  <!--        <a-col :md="12" :sm="8">
            <span style="float: right;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary"><a :href="downloadUrl" >下载配置要求</a></a-button>
               <a-upload
                 :showUploadList="false"
                 :action="uploadAction"
                 :headers="headers"
                 @change="handleChange"
               >
            <div>
               <a-button type="primary" style="margin-left: 8px"> 新建配置</a-button>
            </div>
          </a-upload>
            </span>
          </a-col>-->

        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="table-operator" style="border-top: 4px">
      <a-button @click="handleAdd"  type="primary" icon="plus">添加系统</a-button>

      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay" @click="handleMenuClick">
          <a-menu-item key="1">
            <a-icon type="delete" @click="batchDel"/>
            删除
          </a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px">
          批量操作
          <a-icon type="down"/>
        </a-button>
      </a-dropdown>
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;<a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项&nbsp;&nbsp;
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>

      <a-table
        ref="table"
        bordered
        size="middle"
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange">

        <template slot="avatarslot" slot-scope="text, record, index">
          <div class="anty-img-wrap">
            <a-avatar shape="square" :src="getAvatarView(record.avatar)" icon="user"/>
          </div>
        </template>

        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)"><img class="src" src="../../img/bianji.png" title="编辑"></a>

          <a-divider type="vertical"/>

      <!--        <a-menu-item>
                <a href="javascript:;" @click="handleDetail(record)">详情</a>
              </a-menu-item>-->
                <a @click="handlePath(record.systempath)">
                  <img class="src" src="../../img/fangwendan.png" title="访问"></a>
              <a-divider type="vertical"/>
                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                 <a><img class="src" src="../../img/shanchu.png" title="删除"></a>
                </a-popconfirm>
        </span>


      </a-table>
    </div>
    <!-- table区域-end -->

    <user-modal ref="modalForm" @ok="modalFormOk"></user-modal>

  </a-card>
</template>

<script>
    import UserModal from './modules/UserSsoModal'
    import {frozenBatch} from '@/api/api'
    import { getAction,postAction,putAction } from '@/api/manage'
    import {JantdListMixin} from '@/mixins/JantdListMixin'
    import Vue from 'vue'
    import {ACCESS_TOKEN} from '@/store/mutation-types'


    export default {
        name: "SsoList",
        mixins: [JantdListMixin],
        components: {
            UserModal,
        },
      computed:{
        uploadAction:function () {
          return this.url.upload;
        },
      },
        data() {
            return {
                description: '这是单点登录管理页面',
                queryParam: {},
                filePath: '',
                file:{},
                uploadLoading:false,
                downloadUrl:'',
                fileId:"1",
                headers:{},
                firstLoad:true,
                columns: [
                    {
                        title: '系统名称',
                        align: "center",
                        dataIndex: 'systemname',
                        width: 120
                    },
                    {
                        title: '系统网址',
                        align: "center",
                        width: 100,
                        dataIndex: 'systempath',
                    },
                    {
                        title: '系统图标',
                        align: "center",
                        width: 120,
                        dataIndex: 'avatar',
                        scopedSlots: {customRender: "avatarslot"}
                    },
                    {
                        title: '系统维护热线',
                        align: "center",
                        width: 100,
                        dataIndex: 'phone'
                    },
                    {
                        title: '操作',
                        dataIndex: 'action',
                        scopedSlots: {customRender: 'action'},
                        align: "center",
                        width: 170
                    }

                ],
                url: {
                    imgerver: window._CONFIG['domianURL'] + "/sys/common/view",
                    list: "/test/sso/list",
                    delete: "/test/sso/delete",
                    deleteBatch: "/test/sso/deleteBatch",
                    addFile:"test/file/add",
                    editFile:"test/file/edit",
                    queryFile:"test/file/queryById",
                    upload: window._CONFIG['domianURL'] + "/sys/common/upload",
                    download:window._CONFIG['domianURL'] + "/sys/common/download/",
                },
            }
        },
      created(){
        const token = Vue.ls.get(ACCESS_TOKEN);
        this.headers = {"X-Access-Token":token}
        this.initFile();
      },
        methods: {
          initFile(){
            getAction(this.url.queryFile,{id:this.fileId}).then((res)=>{
              if(res.success){
                this.filePath = res.result.systempath
                this.downloadUrl=this.url.download+res.result.systempath
                console.log("文件查询over")
              }
            })
          },
          handleChange (info) {
            this.picUrl = "";
            if (info.file.status === 'uploading') {
              if(this.firstLoad){
                this.$message.loading("正在上传,请耐心等待！")
                this.firstLoad=false;
              }
            }
            if (info.file.status === 'done') {
              var response = info.file.response;
              console.log(response);
              if(response.success){
                //this.model.avatar = response.message;
                var params = {
                  id : this.fileId,
                  comment:"单点登录配置文件",
                  systempath:response.message
                };
                let formData = Object.assign(params);
                if(this.filePath==""){
                  postAction(this.url.addFile,formData).then((res)=>{
                    if(res.success){
                      this.filePath = response.message
                      this.downloadUrl=this.url.download+response.message
                    }else {
                      this.$message.warning(res.message);
                      this.downloadUrl=this.url.download+response.message
                    }
                  })
                }else {
                  putAction(this.url.editFile,formData).then((res)=>{
                    if(res.success){
                      this.filePath = response.message
                      this.downloadUrl=this.url.download+response.message
                    }else {
                      this.$message.warning(res.message);
                      this.downloadUrl=this.url.download+response.message
                    }
                  })
                }
                this.$message.info("上传成功！")
              }else{
                this.$message.warning(response.message);
              }
            }
          },
            getAvatarView: function (avatar) {
                return this.url.imgerver + "/" + avatar;
            },

            batchFrozen: function (status) {
                if (this.selectedRowKeys.length <= 0) {
                    this.$message.warning('请选择一条记录！');
                    return false;
                } else {
                    let ids = "";
                    let that = this;
                    that.selectedRowKeys.forEach(function (val) {
                        ids += val + ",";
                    });
                }
            },
            handleMenuClick(e) {
                if (e.key == 1) {
                    this.batchDel();
                } else if (e.key == 2) {
                    this.batchFrozen(2);
                } else if (e.key == 3) {
                    this.batchFrozen(1);
                }
            },
            handleFrozen: function (id, status) {
                let that = this;
                frozenBatch({ids: id, status: status}).then((res) => {
                    if (res.success) {
                        that.$message.success(res.message);
                        that.loadData();
                    } else {
                        that.$message.warning(res.message);
                    }
                });
            },
          handlePath(path){
            console.log(Vue.ls.get(ACCESS_TOKEN))
            window.location.href =path+'?token='+Vue.ls.get(ACCESS_TOKEN)
          }
        }


    }
</script>
<style scoped>
  @import '~@assets/less/common.less'
</style>